<script setup lang='ts'>
import { useChatStore } from '@/stores'
import HomeItem from './components/ChatItem.vue'

const chatStore = useChatStore()

const handleClick = (e: any) => {
  // console.log(e.index);
  chatStore.setFirstChat(e.index)
}
</script>
<template>
  <el-scrollbar class="home-aside">
    <my-search></my-search>
    <el-menu
      active-text-color="#303133"
      :default-active="chatStore.first_chat ?? ''"
      router
      class="el-menu-vertical-demo menu"
    >
      <el-menu-item v-for="i in 16" :key="i" :index="'/home/chat/' + i" @click="handleClick">
        <home-item :ItemData="i"></home-item>
      </el-menu-item>
    </el-menu>
  </el-scrollbar>
</template>
<style scoped lang='scss'>
.home-aside {
  flex: 1;
  .menu {
    background-color: $menu-bg;
    ::v-deep(.el-menu-item) {
      &:hover {
        background-color: $menu-item-hover;
        opacity: 0.6;
      }
    }
    .is-active {
      background-color: $menu-item-active;
    }
  }
}
</style>